<template>
  <div class="order_detail" style="overflow: auto;height: 100vh;">

    <van-nav-bar title="确认订单" left-text="" right-text="" left-arrow @click-left="onClickLeft"
      style="background-color: #fff;">
      <template #left>
        <van-icon name="arrow-left" size="19" color="#000" />
      </template>

      <!-- <template #right>
        <van-icon name="ellipsis" size="22" color="#000" />
      </template> -->
    </van-nav-bar>





    <div class="user-order3">
      <div style="display: flex;padding-top: 16px">
        <div style="font-family: MiSans, MiSans;font-weight: 400;font-size: 18px;color: #333333;margin-left: 23px;">
          商品信息
        </div>

      </div>

      <div style="display: flex;padding-top: 20px;">
        <img :src="orderInfo.goods.image" alt="" srcset=""
          style="width: 90px;height: 90px;border-radius: 8px;margin-left: 22px;">
        <div
          style="margin-left: 12px;font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #151515;height: 40px;line-height: 20px;width: 220px;">
          {{ orderInfo.goods.name }}</div>

        <div style="padding-top: 70px;display: flex">
          <div
            style="float: right;right: 20px;font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 12px;color: #666666;position: absolute">
            x1
          </div>
          <div
            style="font-family: MiSans, MiSans;font-weight: 600;font-size: 13px;color: #2E512E;position: absolute;float: left;left: 130px;">
            ￥{{ orderInfo.goods.price }}
          </div>

        </div>
      </div>
    </div>

    <div class="user-order4">
      <div style="display: flex;">
        <div
          style="font-family: MiSans, MiSans;font-weight: 400;font-size: 18px;color: #181818;padding-top: 10px;margin-left: 17px;width: 310px;">
          购买信息</div>

      </div>
      <div style="display: flex;padding-top: 19px;">
        <div
          style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #333333;margin-left: 17px;display: inline-block;width: 115px;">
          商品数量</div>
        <div
          style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #666666;right: 30px;position: absolute;float: right;">
          x1</div>
      </div>
      <div style="display: flex;padding-top: 19px;">
        <div style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #333333;margin-left: 17px;">
          商品金额 </div>
        <div
          style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #666666;right: 30px;position: absolute;float: right;">
          ￥ {{ orderInfo.goods_money }}</div>
      </div>
      <div style="display: flex;padding-top: 19px;">
        <div style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #333333;margin-left: 17px;">
          平台服务费 </div>
        <div
          style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #666666;right: 30px;position: absolute;float: right;">
          ￥ {{ orderInfo.fee }}</div>
      </div>

      <div style="display: flex;padding-top: 19px;">

        <div
          style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;right: 30px;position: absolute;float: right;">
          合计： <span style="color: #2E512E;">￥{{ orderInfo.price }}</span></div>
      </div>
    </div>

    <div class="user-order5">
      <div style="display: flex;">
        <div
          style="font-family: MiSans, MiSans;font-weight: 400;font-size: 18px;color: #181818;padding-top: 10px;margin-left: 17px;width: 310px;">
          支付方式</div>

      </div>
      <div style="display: flex;padding-top: 19px;">
        <div
          style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #333333;margin-left: 17px;display: inline-block;width: 400px;">
          余额账户（可用余额 ￥{{ userInfo.money }}）</div>
        <div
          style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #666666;right: 30px;position: absolute;float: right;">
          <!-- <img src="../../../assets/my/defaultimg.png" alt="" srcset="" style="width: 20px;height: 20px;"> -->
          <van-radio-group v-model="radiozhifu">
            <van-radio name="1" checked-color="#389138"></van-radio>

          </van-radio-group>
        </div>
      </div>
      <div style="display: flex;padding-top: 19px;">
        <div style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #333333;margin-left: 17px;">
          微信支付 </div>
        <div
          style="font-family: MiSans, MiSans;font-weight: 400;font-size: 14px;color: #666666;right: 30px;position: absolute;float: right;">
          <!-- <img src="../../../assets/my/dbaj.png" alt="" srcset="" style="width: 20px;height: 20px;"> -->
          <van-radio-group v-model="radiozhifu">
            <van-radio name="2" checked-color="#389138"></van-radio>

          </van-radio-group>
        </div>
      </div>

    </div>


    <div
      style=" position: absolute;bottom: 0; height: 60px;width: 100%;background-color: #fff;color: #fff;z-index: 999;">
      <div style="display: flex;margin-top: 10px;">
        <div
          style="font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 14px;color: #151515;margin-left: 30px;">
          合计：</div>
        <div style="font-family: PingFang SC, PingFang SC;font-weight: bold;font-size: 17px;color: #2E512E;">
          ￥{{ orderInfo.total }}
        </div>
        <div style="position: absolute;float: right;right: 10px;">

          <van-button
            style="width: 93px;height: 30px;border-radius: 100px;text-align: center;font-size: 14px;background-color: #389138;color: #fff;"
            @click="toG0Pay">立即支付</van-button>
        </div>
      </div>

      <div
        style="font-family: PingFang SC, PingFang SC;font-weight: 500;font-size: 12px;color: #666666;margin-left: 30px;">
        共1件商品
      </div>
    </div>



    <van-popup v-model="showDialog" :style="{ height: '150px', width: '300px', borderRadius: '15px' }">
      <div class="dialog-content" style="text-align: center;">


        <div style="font-family: MiSans, MiSans;font-weight: 400;font-size: 15px;color: #000;margin-top: 36px;">
          是否确认进行支付
        </div>
        <div style="text-align: center;display: flex;margin-top: 30px;">

          <div
            style="width: 120px;height: 44px;background: #389138;border-radius: 100px;line-height: 44px;color: #fff;text-align: center;margin-left: 20px;"
            @click="queding">

            确定
          </div>

          <div
            style="width: 120px;height: 44px;background: #CCCCCC;border-radius: 100px;line-height: 44px;color: #fff;text-align: center;margin-left: 20px;"
            @click="cancek">
            取消
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { orderDetail, orderPrepay } from '@/api/user'
import { mapGetters } from 'vuex'
import { Toast } from 'vant'
export default {
  props: {
    orderSn: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      orderInfo: {},
      loading: true,
      showDialog: false,
      radiozhifu: "1",
      activeIndex:""
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  mounted() {
    this.orderInfo = this.$route.query.orderInfo
    this.activeIndex = this.$route.query.activeIndex
  },
  methods: {
    toG0Pay() {
      this.showDialog = true
    },
    queding() {
      if (this.radiozhifu == "1") {
        let obj = {
          ids: this.orderInfo.id
        }
        orderPrepay(obj).then((res) => {
          if (res.code == 1) {
            this.showDialog = false
            this.$route.params.active = this.activeIndex
            this.$router.back()
          }else{
            this.showDialog = false
            Toast(res.msg)
          }


        })
      } else {
        this.$router.replace({
          path: "/order/paySuccess",
          query: {
            total: this.orderInfo.total
          }
        })
      }

    },
    toOrderDetail() {
      this.$router.push({
        path: "/order/pay"
      })
    },
    cancek() {
      this.showDialog = false
    },
    onClickLeft() {
      this.$route.params.active = this.activeIndex
      this.$router.back()
    },
    orderDetail() {
      orderDetail(this.orderSn)
        .then((res) => {
          this.orderInfo = res.data
        })
        .finally((res) => {
          this.loading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.user-order {
  width: 702px;
  height: 100px;
  margin: 0 auto;
  box-shadow: var(--user-order-shadow);
  border-radius: 24px;
  margin-top: 42px;
  background-color: #fff;
}

.user-order2 {
  width: 702px;
  height: 220px;
  margin: 0 auto;
  box-shadow: var(--user-order-shadow);
  border-radius: 24px;
  margin-top: 42px;
  background-color: #fff;
}

.user-order3 {
  width: 702px;
  height: 300px;
  margin: 0 auto;
  box-shadow: var(--user-order-shadow);
  border-radius: 24px;
  margin-top: 42px;
  background-color: #fff;
}

.user-order4 {
  width: 702px;
  height: 350px;
  margin: 0 auto;
  box-shadow: var(--user-order-shadow);
  border-radius: 24px;
  margin-top: 42px;
  background-color: #fff;
}

.user-order5 {
  width: 702px;
  height: 250px;
  margin: 0 auto;
  box-shadow: var(--user-order-shadow);
  border-radius: 24px;
  margin-top: 42px;
  background-color: #fff;
}
</style>
